import { TabBar as AntdTabBar } from "antd-mobile";
import { FC } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import "./tabbar.less";
import fast from "@/assets/images/tabbar/fast.png";
import home1 from "@/assets/images/tabbar/home_1.png";
import home2 from "@/assets/images/tabbar/home_2.png";
import my1 from "@/assets/images/tabbar/my_1.png";
import my2 from "@/assets/images/tabbar/my_2.png";

const routes = ["/home", "/fast", "/mine"];

const TabBar: FC = () => {
  const location = useLocation();
  const { pathname } = location;
  console.log(pathname);

  const navigate = useNavigate();

  const setRouteActive = (value: string) => {
    navigate(value);
  };

  const tabs = [
    {
      key: "/home",
      title: "首页",
      icon: <img src={home2} />,
      activeIcon: <img src={home1} />,
    },
    {
      key: "/fast",
      title: "快速刷题",
      icon: <img src={fast} />,
      activeIcon: <img src={fast} />,
    },
    {
      key: "/mine",
      title: "我的",
      icon: <img src={my2} />,
      activeIcon: <img src={my1} />,
    },
  ];

  return (
    <div
      className="tab-bar"
      style={{ display: routes.includes(pathname) ? "block" : "none" }}
    >
      <AntdTabBar
        activeKey={pathname}
        onChange={(value) => setRouteActive(value)}
      >
        {tabs.map((item) => (
          <AntdTabBar.Item
            key={item.key}
            icon={pathname === item.key ? item.activeIcon : item.icon}
            title={item.title}
          />
        ))}
      </AntdTabBar>
    </div>
  );
};

export default TabBar;
